<!DOCTYPE html>
<html lang="zn-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湘农青年</title>

    <script src="JS/第五次.js">
    </script>

</head>
<link rel="stylesheet" href="CSS/第五次.css">

<body onload="startTime()">
    <div id="yi" onmouseover="jinlai(this)" onmouseout="zoukai(this)">请把鼠标移上来</div>
    <div id="er">JS HTML DOM</div>
    <button type="button" onclick="hong()">变红色</button>
    <button type="button" onclick="lv()">变绿色</button>
    <div id="txt"></div>
    <div id="box" style="left: 0;margin-top: 50px;"></div>
    <button id="btn">红爸爸动起来</button>

</body>
<script>
    var speed = 10;
    var flag = true;
    var interId;

    function moveTop() {
        var oldTop = parseInt(box.style.left);

        if (oldTop >= window.innerHeight - 50 || oldTop < 0) {
            speed *= 0;
        }
        box.style.left = oldTop + speed + "px";
    }

    function onOff(rand) {

        if (flag) {

            {
                interId = setInterval("moveTop()", 50);

            }
            flag = true;
        }
    }

    btn.onclick = onOff;
</script>


</html>